import React from 'react'

import { Card, Form, Input, Space, Select, Button, Table } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table'

// 注意: Option组件是从Select组件中解构出来的
const { Option } = Select

export default function HospitalList() {
  const columns: ColumnsType<any> = [
    {
      title: '序号',
      render(a, b, index) {
        return index + 1
      },
      align: 'center', // 设置单元格内容居中对齐
      width: 80,
    },
    {
      title: '医院logo',
      render() {
        return (
          <img
            src="https://img0.baidu.com/it/u=2828055464,3492517680&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500"
            alt=""
            width="80"
          />
        )
      },
    },
    {
      title: '医院名称',
    },
    {
      title: '等级',
    },
    {
      title: '详细地址',
    },
    {
      title: '状态',
    },
    {
      title: '创建时间',
    },
    {
      title: '操作',
      render() {
        return (
          <Space>
            <Button type="primary">查看</Button>
            <Button type="primary">排班</Button>
            <Button type="primary">上线</Button>
          </Space>
        )
      },
      width: 120,
    },
  ]
  return (
    <Card>
      <Form layout="inline">
        <Form.Item name="provinceCode" style={{ width: 200, marginBottom: 20 }}>
          <Select placeholder="请选择省">
            <Option value="gd">广东省</Option>
          </Select>
        </Form.Item>
        <Form.Item name="cityCode" style={{ width: 200 }}>
          <Select placeholder="请选择市">
            <Option value="sz">深圳省</Option>
          </Select>
        </Form.Item>
        <Form.Item name="districtCode" style={{ width: 200 }}>
          <Select placeholder="请选择区">
            <Option value="ba">宝安区</Option>
          </Select>
        </Form.Item>
        <Form.Item name="hosname">
          <Input placeholder="医院名称"></Input>
        </Form.Item>
        <Form.Item name="hoscode">
          <Input placeholder="医院编码"></Input>
        </Form.Item>
        <Form.Item name="hostype" style={{ width: 200, marginBottom: 20 }}>
          <Select placeholder="医院类型">
            <Option value="xxx">xxx</Option>
          </Select>
        </Form.Item>
        <Form.Item name="status" style={{ width: 200 }}>
          <Select placeholder="医院状态">
            {/* value="0" 这是字符串0 */}
            {/* value={0} 这是数字0 */}
            <Option value={0}>未上线</Option>
            <Option value={1}>已上线</Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
            <Button>清空</Button>
          </Space>
        </Form.Item>
      </Form>
      <Table columns={columns} dataSource={[{ id: 1 }]} rowKey={'id'}></Table>
    </Card>
  )
}
